﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>首页</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!--responsive-->
    <link rel="shortcut icon" href="../Content/img/jridge.ico" />
    <link rel="bookmark" href="../Content/img/jridge.ico" />
    <script src="../Scripts/jquery-1.10.2.min.js"></script>
    <script src="../Scripts/clipboard-polyfill.js"></script>
    <!--vue-->
    <script src="../Scripts/vue-2.5.9/vue.min.js"></script>
    <!--axios-->
    <script src="../Scripts/vue-2.5.9/axios.min.js"></script>
    <!--elementUI-->
    <script src="../Scripts/elementUI-2.2.2/index.js"></script>
    <link rel="stylesheet" href="../Scripts/elementUI-2.2.2/theme-chalk/index.css">
    <!--Mint-UI-->
    <script src="../Scripts/mint-ui//index.js"></script>
    <link rel="stylesheet" href="../Scripts/mint-ui/style.css">
    <!--custom-->
    <link rel="stylesheet" href="../Content/vue-common.css">
    <script src="../Scripts/service/vue-service.js"></script>

    <style>
        .mint-header-title {
            margin-top: 10px;
        }
        .homeSlide {
            width: 90%;
            margin: 15% auto auto 5%;
        }
        .homeSlide img{
            width:100%
        }
        #content {
            margin: 3% 5% auto 5%;
        }

        .welcome {
            font-size: 12px;
            color: #a1a2a4;
            margin-bottom: 5px;
        }

        .dividingLine {
            color: #f5f5f5;
            margin: 0px;
        }

        .box .el-button {
            height: 15%;
            background-color: #f6f6f8;
            color: red;
            text-align: center;
        }

        .box p {
            font-size: 10px;
            color: #a1a2a4;
            margin-top: 5px;
        }

        #TodoLists {
            margin-top: 6%;
        }

        #mes {
            margin-top: 5%;
        }

        .mesBox {
            margin: 10px 4% auto 4%;
            text-align: center;
            cursor: pointer;
        }

        .mesBox img {
            width: 94%;
            border-radius: 10px;
        }

        .mesBox p {
            font-size: 12px;
        }

        .mint-header-title {
            margin-top: 10px
        }
    </style>
</head>

<body>
    <div id="app">
        <mt-header fixed title="简睿捷智能制造系统" style="font-size:14px;"></mt-header>
        <el-carousel :auto="4000" height="100px" width="80%" class="homeSlide">
            <el-carousel-item>
                <img class="img-responsive" src="./img/slides/1.jpg">
            </el-carousel-item>
            <el-carousel-item>
                <img class="img-responsive" src="./img/slides/2.jpg">
            </el-carousel-item>
            <el-carousel-item>
                <img class="img-responsive" src="./img/slides/3.jpg">
            </el-carousel-item>
        </el-carousel>
        <el-row id="content">
            <p class="welcome">
                <i class="el-icon-service" style="margin-right:6px;"></i>您好，{{userName}}</p>
            <hr class="dividingLine">
            <el-row id="TodoLists">
                <el-row class="box">
                    <el-button size="small">12</el-button>
                    <p>待完成任务</p>
                </el-row>
            </el-row>
            <hr class="dividingLine">
            <el-row id="mes">
                <h5 style="margin-bottom:10px;">生产作业</h5>
                <el-col class="mesBox" :span="4" v-for="(item,index) in data" :key="index">
                    <img :src="item.img" @click="jumpApp(item.appHref)">
                    <p>{{item.name}}</p>
                </el-col>
            </el-row>
            <el-row>

            </el-row>
        </el-row>
    </div>
</body>
<script src="index.js"></script>
<script src="../Template/vue-components.js"></script>
</html>